<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>备品备件</title>
	
	<jsp:include page="/plugins/inc/common.jsp" flush="true"/>
</head>
<body>
	<div id="main">
	<div id="toolbar">
		<a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i>新增</a>
		<a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i>编辑</a>
		<a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></i>删除</a>
	</div>
	<table id="table"></table>
</div>
<script>
	var $table = $('#table');
	$(function() {
		// bootstrap table初始化
		$table.bootstrapTable({
			url: '${basePath}/base/part/list.do',
			height: getHeight(),
			striped: true,
			search: true,
			showRefresh: true,
			showToggle: true,
			showColumns: true,
			minimumCountColumns: 2,
			clickToSelect: true,
			detailView: true,
			detailFormatter: 'detailFormatter',
			pagination: true,
			paginationLoop: false,
			sidePagination: 'server',
			silentSort: false,
			smartDisplay: false,
			escape: true,
			searchOnEnterKey: true,
			idField: 'infoId',
			maintainSelected: true,
			toolbar: '#toolbar',
			columns: [
				{field: 'ck', checkbox: true},
				{field: 'infoId', title: '编号', sortable: true, align: 'center'},
	            {field: 'name', title: '名称', align: 'center'},
	            {field: 'model', title: '型号', align: 'center'},
				{field: 'spec', title: '规格', align: 'center'},
				{field: 'categoryName', title: '分类', align: 'center'},
				{field: 'unit', title: '单位', align: 'center'},
				{field: 'brank', title: '品牌', align: 'center'},
				{field: 'price', title: '单价', sortable: true, align: 'center'},
				{field: 'cremark', title: '备注',  align: 'center'},
				{field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
			]
		});
	});
	
	// 格式化操作按钮
	function actionFormatter(value, row, index) {
	    return [
			'<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
			'<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
	    ].join('');
	}
	
	// 新增
	var createDialog;
	function createAction() {
		createDialog = $.dialog({
			columnClass: 'medium',
			animationSpeed: 300,
			title: '新增备件',
			content: 'url:${basePath}/base/part/create.do',
			onContentReady: function () {
				initMaterialInput();
				$('select').select2();
			}
		});
	}
	
	// 编辑
	var updateDialog;
	function updateAction() {
		var rows = $table.bootstrapTable('getSelections');
		if (rows.length != 1) {
			$.confirm({
				title: false,
				content: '请选择一条记录！',
				autoClose: 'cancel|3000',
				backgroundDismiss: true,
				buttons: {
					cancel: {
						text: '取消',
						btnClass: 'waves-effect waves-button'
					}
				}
			});
		} else {
			updateDialog = $.dialog({
				columnClass: 'medium',
				animationSpeed: 300,
				title: '编辑用户',
				content: 'url:${basePath}/base/part/update/' + rows[0].infoId + ".do",
				onContentReady: function () {
					initMaterialInput();
					$('select').select2();
				}
			});
		}
	}
	
	// 删除
	var deleteDialog;
	function deleteAction() {
		var rows = $table.bootstrapTable('getSelections');
		if (rows.length == 0) {
			$.confirm({
				title: false,
				content: '请至少选择一条记录！',
				autoClose: 'cancel|3000',
				backgroundDismiss: true,
				buttons: {
					cancel: {
						text: '取消',
						btnClass: 'waves-effect waves-button'
					}
				}
			});
		} else {
			deleteDialog = $.confirm({
				animationSpeed: 300,
				title: false,
				content: '确认删除该用户吗？',
				buttons: {
					confirm: {
						text: '确认',
						btnClass: 'waves-effect waves-button',
						action: function () {
							var ids = new Array();
							for (var i in rows) {
								ids.push(rows[i].infoId);
							}
							$.ajax({
								type: 'get',
								url: '${basePath}/base/part/delete/' + ids.join("-") + '.do',
								success: function(result) {
									if (result.code != 1) {
										if (result.data instanceof Array) {
											$.each(result.data, function(index, value) {
												$.confirm({
													theme: 'dark',
													animation: 'rotateX',
													closeAnimation: 'rotateX',
													title: false,
													content: value.errorMsg,
													buttons: {
														confirm: {
															text: '确认',
															btnClass: 'waves-effect waves-button waves-light'
														}
													}
												});
											});
										} else {
											$.confirm({
												theme: 'dark',
												animation: 'rotateX',
												closeAnimation: 'rotateX',
												title: false,
												content: result.data.errorMsg,
												buttons: {
													confirm: {
														text: '确认',
														btnClass: 'waves-effect waves-button waves-light'
													}
												}
											});
										}
									} else {
										deleteDialog.close();
										$table.bootstrapTable('refresh');
									}
								},
								error: function(XMLHttpRequest, textStatus, errorThrown) {
									$.confirm({
										theme: 'dark',
										animation: 'rotateX',
										closeAnimation: 'rotateX',
										title: false,
										content: textStatus,
										buttons: {
											confirm: {
												text: '确认',
												btnClass: 'waves-effect waves-button waves-light'
											}
										}
									});
								}
							});
						}
					},
					cancel: {
						text: '取消',
						btnClass: 'waves-effect waves-button'
					}
				}
			});
		}
	}
	
</script>
</body>
</html>